<template>
	<view class="tree-container" :style="{height:3440 + 'px', width: setWidth + 'px'}">
		<!-- 大树 -->
		<image src="../../static/home/tree-lite.png" :style="{height:3440 + 'px', width: setWidth + 'px'}"
			class="tree-image"></image>
		<!-- 树枝 -->
		<view :class="'branch-container' + index" v-for="(item,index) in itemsList" :key="index">
			<!-- 表示状态的苹果 -->
			<image src="../../static/home/yellow.svg" v-if="item.grade=='2'" @click="showItem(index)" class="status">
			</image>

			<image src="../../static/home/red.svg" class="status" @click="showItem(index)" v-else-if="item.grade=='3'">
			</image>

			<image src="../../static/home/green.svg" class="status" @click="showItem(index)" v-else></image>
		</view>
		<!-- 消息弹窗 -->
		<view class="msg-alert" v-if="showAnItem">
			<!-- <text>状态：{{ itemsList[indexID].grade==3 ? '紧急任务':'普通任务'}}</text><br> -->
			<template v-if="itemsList[indexID].grade=='2'">
				<view>
					<text>状态：一般任务</text><br>
				</view>
			</template>
			<template v-else-if="itemsList[indexID].grade=='1'">
				<view>
					<text>状态：普通任务</text><br>
				</view>
			</template>
			<template v-else>
				<view>
					<text>状态：紧急任务</text><br>
				</view>
			</template>
			<text>任务：{{ itemsList[indexID].value }}</text><br>
			<text>开始时间：{{ itemsList[indexID].beginTime.substring(0,10)+' '+itemsList[indexID].beginTime.substring(11,19)}}</text><br>
			<text>结束时间：{{ itemsList[indexID].endTime.substring(0,10)+' '+itemsList[indexID].endTime.substring(11,19) }}</text><br>
			<button type="default" @click="showAnItem=false">确认</button>
		</view>

		<!-- 彩虹底部 -->
		<view class="rainbow-container-bottom">
			<!-- <image src="../../static/home/rainbow.png" class="rainbow"></image> -->
			<text> 早上好 !</text>
		</view>
		<!-- 彩虹顶部 -->
		<view class="rainbow-container-top">
			<!-- <image src="../../static/home/rainbow.png" class="rainbow"></image> -->
			<text>Congratulation!</text>
		</view>



		<!-- 左上角功能 -->
		<view class="icon_contanier">
			<view class="coin">
				<image class="coin_icon" :src="imageUrlCoinIcon" />
				<text class="coin_text">{{(coinData)?coinData:"0"}}</text>
				<!-- 硬币 -->
				<!-- 硬币 -->
			</view>
			<!-- 弹出窗口组件 -->
			<image :src="imageUrlTaskIcon" class="task_icon" @click="open" />
			<view class="taskUniPopup">
				<u-popup ref="popup" :mask-click="false">
					<view class="task_index">
						<view class="task_title">今日任务</view>
						<view class="task_list">
							<!-- 任务接口 -->
							<view class="task_task" @click='getCoin1'>1.今日登入+10
								<!--判断 -->
								<image :src='imageURLTaskStart' class="task_startSatus" v-if="!taskStatus1" />
								<image :src='imageURLTaskOver' class="task_overStatus" v-else />
							</view>
							<view class="task_task" @click='getCoin2'>2.添加一个小计划+10
								<!--判断 -->
								<image :src='imageURLTaskStart' class="task_startSatus" v-if="!taskStatus2" />
								<image :src='imageURLTaskOver' class="task_overStatus" v-else />
							</view>
							<view class="task_task" @click='getCoin3'>3.添加两个小计划+10
								<!--判断 -->
								<image :src='imageURLTaskStart' class="task_startSatus" v-if="!taskStatus3" />
								<image :src='imageURLTaskOver' class="task_overStatus" v-else />
							</view>
							<view class="task_task" @click='getCoin4'>4.添加三个小计划+10
								<!--判断 -->
								<image :src='imageURLTaskStart' class="task_startSatus" v-if="!taskStatus4" />
								<image :src='imageURLTaskOver' class="task_overStatus" v-else />
							</view>
							<view class="task_task" @click='getCoin5'>5.添加四个小计划+10
								<!--判断 -->
								<image :src='imageURLTaskStart' class="task_startSatus" v-if="!taskStatus5" />
								<image :src='imageURLTaskOver' class="task_overStatus" v-else />
							</view>
							<!-- 任务接口 -->
						</view>
						<button @click="close" class="task_close">关闭</button>
					</view>
				</u-popup>
			</view>
			<!-- 弹出窗口组件 -->
		</view>
		<!-- 左上角功能 -->






		<!-- 右上角功能 -->
		<view class="right">
			<!-- 添加任务 -->
			<image src="../../static/home/add.png" @click="elastic"></image>
			<!-- 第一层遮挡层 + 弹出内容-->
			<u-popup border-radius="10" v-model="show" :mode="mode" length="90%" :mask="mask" height="700rpx"
				:mask-close-able="closemask">
				<view>
					<view class="title"> 添加待办 </view>
					<view class="add" style="width: 90%">
						<!-- 动态生成 -->
						<input type="text" placeholder="请输入待办名称" class="input" placeholder-style="color:#9BB578;"
							v-model="inputValue" />
						<!-- 单选框 -->
						<view>
							<radio-group name="grade" v-model="radioValItem" @change="radioChange"
								style="display: flex; margin: 20rpx 0">
								<label style="flex: 3; font-size: 13px">待办等级:</label>
								<label style="flex: 2">
									一般
									<radio value="1" class="one"></radio>
								</label>
								<label style="flex: 2">
									普通
									<radio value="2" class="two"></radio>
								</label>
								<label style="flex: 2">
									紧急
									<radio value="3" class="three"></radio>
								</label>
							</radio-group>
						</view>
						<!-- 设置时间 -->
						<view>
							<label><text style="display: block; font-size: 13px; margin-bottom: 20rpx">开始时间:</text>
								<uni-datetime-picker mode="datetime" v-model="beginTime">
								</uni-datetime-picker>
							</label>
							<label><text style="display: block; font-size: 13px; margin: 20rpx">结束时间:</text>
								<uni-datetime-picker mode="datetime" style="margin-top: 10rpx" v-model="endTime">
								</uni-datetime-picker>
							</label>
						</view>
					</view>
					<view style="display: flex">
						<button class="btn" @click="success">完成</button>
						<button class="btn" @click="cancel">取消</button>
					</view>
					<!-- 	</view> -->
				</view>
			</u-popup>
		</view>





	</view>
</template>

<script>
	export default {
		data() {
			return {
				setHeight: 0,
				setWidth: 0,
				src: require("../../static/home/background1.jpg"),
				show: false, //第一层弹框
				mode: "center",
				mask: true,
				hackReset: true,
				inputValue: [], //用户待办事务列表
				closeIconPos: "top-right",
				closemask: false,
				clear: "", //用来清空值
				radioVal: "等级",
				radioValItem: "", //取值放进来
				value1: Number(new Date()), //开始时间
				value2: Number(new Date()), //结束时间
				beginTime: "", //开始时间
				endTime: "", //结束时间
				thingObj: [], //存放每一个生成对象的表单对象
				things: [],
				index: 0,
				//海峰数据
				href: "https://uniapp.dcloud.io/component/README?id=uniui",
				imageURL: "../../static/home/background1.jpg",
				coinData: "",
				taskStatus1: uni.getStorageSync("firstLogin"),
				taskStatus2: uni.getStorageSync("hadCoin2"),
				taskStatus3: uni.getStorageSync("hadCoin3"),
				taskStatus4: uni.getStorageSync("hadCoin4"),
				taskStatus5: uni.getStorageSync("hadCoin5"),
				isGetCoin: "",
				imageUrlCoinIcon: '../../static/coin.png',
				imageUrlTaskIcon: '../../static/taskIcon.png',
				imageURLTaskStart: "../../static/taskIcon/taskStart.png",
				imageURLTaskOver: "../../static/taskIcon/overIcon.png",
				topStatus: false,
				// 凯伦的数据
				// 需要显示的id，
				indexID: 1,
				// 显示事项
				showAnItem: false,
				// 事项模拟数据
				itemsList: [],
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.setHeight = res.windowHeight;
					this.setWidth = res.windowWidth;
				},
			});
			// 获取列表数据
			this.getItems()
			this.getcoin()
		},
		methods: {
			// 请求测试
			async getItems() {
				const {
					data: res,
					statusCode
				} = await this.$myRequest({
					method: 'GET',
					url: '/task/get'
				})
				console.log(res)
				if (statusCode !== 200) return
				this.itemsList = res

			},
			open() {
				uni.getStorage({
					key: 'userToken',
					success: (res) => {
						if (res.data) {
							this.topStatus = this;
							this.$refs.popup.open('top')
						}
					},
					fail: () => {
						uni.showToast({
							title: '未登入',
							duration: 2000,
							icon: 'error',
						});
					}
				})
			},
			close() {
				this.$refs.popup.close();
			},
			getCoin1() {
				let isFirstLogin = uni.getStorageSync("firstLogin")
				if (!isFirstLogin) {
					this.addCoin()
					uni.setStorageSync("firstLogin", true)
					uni.setStorageSync("hadCoin", true)
					uni.reLaunch({
						url: "../index/index",
					})
					uni.showToast({
						title: '成功获得金币',
						duration: 2000,
						icon: 'success',
					});
				} else if (uni.getStorageSync("hadCoin")) {
					uni.showToast({
						title: '你已经领取过了',
						duration: 2000,
						icon: 'error',
					});
				} else {
					uni.showToast({
						title: '未完成任务',
						duration: 2000,
						icon: 'error',
					});
					this.open()
				}
			},
			async getcoin() {
				const res = await this.$myRequest({
					url: '/coin/get',
				});
				if (res.statusCode == 200) {
					this.coinData = res.data[0].nums
				}
				console.log(this.coinData)
			},
			getCoin2() {
				let complete = uni.getStorageSync("complete")
				let hadCoin2 = uni.getStorageSync("hadCoin2")
				if (!hadCoin2) {
					if (complete >= 1) {
						this.addCoin()
						uni.setStorageSync("hadCoin2", true)
						uni.reLaunch({
							url: "../index/index",
						})
						uni.showToast({
							title: '成功获得金币',
							duration: 2000,
							icon: 'success',
						});
					} else {
						uni.showToast({
							title: '未完成任务',
							duration: 2000,
							icon: 'error',
						});
					}
				} else {
					uni.showToast({
						title: '你已经领取过了',
						duration: 2000,
						icon: 'error',
					});
				}
			},
			getCoin3() {
				let complete = uni.getStorageSync("complete")
				let hadCoin3 = uni.getStorageSync("hadCoin3")
				if (!hadCoin3) {
					if (complete >= 2) {
						this.addCoin()
						uni.setStorageSync("hadCoin3", true)
						uni.reLaunch({
							url: "../index/index",
						})
						uni.showToast({
							title: '成功获得金币',
							duration: 2000,
							icon: 'success',
						});
					} else {
						uni.showToast({
							title: '未完成任务',
							duration: 2000,
							icon: 'error',
						});
					}
				} else {
					uni.showToast({
						title: '你已经领取过了',
						duration: 2000,
						icon: 'error',
					});
				}
			},
			getCoin4() {
				let complete = uni.getStorageSync("complete")
				let hadCoin4 = uni.getStorageSync("hadCoin4")
				if (!hadCoin4) {
					if (complete >= 3) {
						this.addCoin()
						uni.setStorageSync("hadCoin4", true)
						uni.reLaunch({
							url: "../index/index",
						})
						uni.showToast({
							title: '成功获得金币',
							duration: 2000,
							icon: 'success',
						});
					} else {
						uni.showToast({
							title: '未完成任务',
							duration: 2000,
							icon: 'error',
						});
					}
				} else {
					uni.showToast({
						title: '你已经领取过了',
						duration: 2000,
						icon: 'error',
					});
				}
			},
			getCoin5() {
				let complete = uni.getStorageSync("complete")
				let hadCoin5 = uni.getStorageSync("hadCoin3")
				if (!hadCoin5) {
					if (complete >= 4) {
						this.addCoin()
						uni.setStorageSync("hadCoin5", true)
						uni.reLaunch({
							url: "../index/index",
						})
						uni.showToast({
							title: '成功获得金币',
							duration: 2000,
							icon: 'success',
						});
					} else {
						uni.showToast({
							title: '未完成任务',
							duration: 2000,
							icon: 'error',
						});
					}
				} else {
					uni.showToast({
						title: '你已经领取过了',
						duration: 2000,
						icon: 'error',
					});
				}
			},
			async addCoin() {
				let temp = parseInt(this.coinData) + 10
				const res = await this.$myRequest({
					method: "POST",
					url: '/coin/change',
					data: {
						"num": temp
					}
				});
				if (res.statusCode == 200) {
					this.taskStatus = true
				}
			},
			elastic() {
				this.show = true; //第一层弹出框显示
			},
			radioChange(e) {
				this.radioValItem = e.detail.value;
				return this.radioValItem;
			},
			// 添加
			addthingObj(e) {
				this.things = {
					thingid: this.index += 1,
					value: this.inputValue,
					grade: this.radioValItem,
					beginTime: this.beginTime,
					endTime: this.endTime,
				};


				// this.things.push(this.thingObj)
				this.clearMethod();
				console.log(this.things);
				let temp = parseInt(uni.getStorageSync("complete")) ? parseInt(uni.getStorageSync("complete")) : 0;
				uni.setStorageSync("complete", ++temp)
			},
			// cancel取消事件
			cancel() {
				this.show = false;
				this.clearMethod();
			},
			// 成功事件
			async success() {
				let that = this
				this.addthingObj();
				this.show = false;
				this.inputValue = "";
				const res = await this.$myRequest({
					method: "POST",
					url: "/task/add",
					data: {
						thingObj: {
							thingid: this.things.thingid,
							value: this.things.value,
							grade: this.things.grade,
							beginTime: this.things.beginTime,
							endTime: this.things.endTime
						}
					},
				});
				if (res.statusCode == 200) {
					let that = this
					uni.showToast({
						title: "添加成功！",
						duration: 2000,
						icon: "success",
						success() {
							uni.setStorage({
								key: "thingid",
								data: that.things.thingid,
								success: function() {},
							});
							uni.setStorage({
								key: "value",
								data: that.things.value,
								success: function() {},
							});
							uni.setStorage({
								key: "grade",
								data: that.things.grade,
								success: function() {},
							});
							uni.setStorage({
								key: "beginTime",
								data: that.things.beginTime,
								success: function() {},
							});
							uni.setStorage({
								key: "endTime",
								data: that.things.endTime,
								success: function() {},
							});
							that.getItems()
						},
					});
					console.log(
						uni.getStorageSync("thingid") +
						uni.getStorageSync("value") +
						uni.getStorageSync("grade")
					);
					console.log(
						uni.getStorageSync("beginTime") + uni.getStorageSync("endTime")
					);
					return;
				}
			},
			clearMethod() {
				(this.inputValue = ""),
				//(this.radioValItem = ""),
				(this.beginTime = ""),
				(this.endTime = "");
			},

			// 凯伦的方法
			showItem(index) {
				this.indexID = index
				// console.log(index)
				this.showAnItem = true
			}
		},

	};
</script>

<style lang="scss">
	@import "uview-ui/index.scss";

	.uni-calendar__content {
		height: 90%;
		width: 100%;
	}

	.content {
		width: 100%;
		background-size: 100% 100%;
	}

	.right {
		height: 200rpx;
		position: fixed;
		top: 120rpx;
		right: 0;
	}

	.logo {
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	image {
		width: 100rpx;
		height: 100rpx;
		float: right;
		margin: 5rpx 5rpx 0 0;
	}

	.modal {
		background: #19be6b;
	}

	.input {
		border: 0;
		border-bottom: 1px solid #86a279;
		color: #9bb578;
		outline: 0;
		width: 100%;
		font-size: 18px;
		padding: 5px 0;
	}

	.inputtwo {
		border: 0;
		border-bottom: 1px solid #86a279;
		color: #9bb578;
		outline: 0;
		width: 80%;
		font-size: 18px;
		position: absolute;
		left: 70rpx;
		top: 120rpx;
	}

	.btn {
		width: 150rpx;
		font-size: 12px;
		margin-top: 10rpx;
	}

	.add {
		padding: 8px 10px 8px 20px;
	}

	.dui {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 5px;
		right: 40px;
	}

	.title {
		width: 100%;
		height: 30px;
		font-size: 18px;
		text-align: center;
		background-color: #9bb578;
	}

	.select {
		flex: 1;
	}

	// qin的样式
	.icon_contanier {
		// width: 100vw;
		// height: 100vh;
		position: relative;
	}

	.coin {
		position: fixed;
		left: 2vw;
		top: 7vh;
		z-index: 1000;
	}

	.coin_icon {
		width: 40px;
		height: 40px;
		position: absolute;
		z-index: 1000;
		border: 5px solid #EF7850;
		border-radius: 50% 50% 50% 50%;
		opacity: 0.9;
	}

	.coin_text {
		font-size: 1.25rem;
		top: 26px;
		left: 15px;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		transform: translate(0, -50%);
		position: absolute;
		z-index: 0;
		font-family: Microsoft YaHei;
		width: 130px;
		height: 34px;
		border-radius: 30px 30px 30px 30px;
		background-color: white;
		border: 4px solid #EF7850;
		opacity: 0.7;
		color: #4FAE70;
		text-indent: 1.25rem;
		font-weight: 300;
	}

	.task_icon {
		position: fixed;
		top: 16vh;
		left: 2vw;
		width: 60px;
		height: 50px;
		z-index: 0;
	}

	.task_title {
		height: 10vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22px;
		text-align: center;
		padding: 0;
		margin: 0;
		color: #FFFFFF;
		background: url("https://www.helloimg.com/images/2021/11/20/GGVDQb.png") no-repeat center;
	}

	.task_index {
		display: flex;
		flex-direction: column;
		background-color: #3333;
		position: relative;
		height: 125vh;
		z-index: 1500;
		background-color: #FFFFFF;
	}

	.task_close {
		height: 8vh;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		position: fixed;
		bottom: 0px;
	}

	.task_list {
		display: flex;
		flex-direction: column;
		height: 80vh;
	}

	.task_task {
		display: flex;
		flex: 1;
		justify-content: space-between;
		background: url("https://www.helloimg.com/images/2021/11/20/GGVfZv.png") no-repeat center;
		box-sizing: border-box;
		margin: 10px;
		border-radius: 40px 40px 40px 40px;
		padding: 30px;
		font-size: 22px;
		border: 2px solid darkcyan;
		font-weight: 1000;
		color: #418ACE;
	}

	.task_startSatus {
		width: 30px;
		height: 30px;
		border-radius: 50% 50% 50% 50%;
		position: relative;
		left: -15px;
	}

	.task_overStatus {
		width: 30px;
		height: 30px;
		border-radius: 50% 50% 50% 50%;
		position: relative;
		left: -15px;
	}

	// qin的样式

	// 凯伦的样式
	// 路径
	$branchLeft: '../../static/home/branch-left.png';
	$branchRight: '../../static/home/branch-right.png';

	// 大树及背景树枝样式
	@mixin common($h, $w, $path) {
		position: absolute;
		width: 300rpx;
		height: 260rpx;
		bottom: $h;
		left: $w;
		background-image: url($path);
		-moz-background-size: 100% 100%;
		background-size: 100% 100%;

		.status {
			width: 300rpx;
			height: 120rpx;
		}
	}

	.content {
		width: 100%;
		background-size: 100% 100%;
	}

	.logo {
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	.tree-container {
		position: relative;
		background-color: #007AFF;
		background-color: rgb(218, 230, 206);
		// background-image: url(../../static/home/background1.jpg);
		// background-size: 100% 100%;

		.tree-image {
			position: absolute;
		}

		.branch-container0 {
			@include common(230rpx, 10rpx, $branchLeft)
		}

		.branch-container1 {
			@include common(460rpx, 380rpx, $branchRight)
		}

		.branch-container2 {
			@include common(680rpx, 30rpx, $branchLeft)
		}

		.branch-container3 {
			@include common(900rpx, 410rpx, $branchRight)
		}

		.branch-container4 {
			@include common(1200rpx, 74rpx, $branchLeft)
		}

		.branch-container5 {
			@include common(1430rpx, 446rpx, $branchRight)
		}

		.branch-container6 {
			@include common(1680rpx, 88rpx, $branchLeft)
		}

		.branch-container7 {
			@include common(1940rpx, 440rpx, $branchRight)
		}

		.branch-container8 {
			@include common(2200rpx, 72rpx, $branchLeft)
		}

		.branch-container9 {
			@include common(2480rpx, 420rpx, $branchRight)
		}

		.branch-container10 {
			@include common(2740rpx, 40rpx, $branchLeft)
		}

		.branch-container11 {
			@include common(3040rpx, 392rpx, $branchRight)
		}

		.branch-container12 {
			@include common(3400rpx, 38rpx, $branchLeft)
		}

		.branch-container13 {
			@include common(3730rpx, 420rpx, $branchRight)
		}

		.branch-container14 {
			@include common(4060rpx, 80rpx, $branchLeft)
		}

		.branch-container15 {
			@include common(4330rpx, 458rpx, $branchRight)
		}

		.branch-container16 {
			@include common(4680rpx, 108rpx, $branchLeft)
		}

		.branch-container17 {
			@include common(5020rpx, 470rpx, $branchRight)
		}

		.branch-container18 {
			@include common(5320rpx, 96rpx, $branchLeft)
		}

		.branch-container19 {
			@include common(5640rpx, 438rpx, $branchRight)
		}

		.branch-container20 {
			@include common(5940rpx, 50rpx, $branchLeft)
		}

		.branch-container21 {
			@include common(6200rpx, 390rpx, $branchRight)
		}

		.msg-alert {
			display: block;
			width: 400rpx;
			height: 400rpx;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			text-align: center;
			border: 3px solid skyblue;
			border-radius: 20rpx;
			// font-size: 20rpx;
			background-color: #7369ff;

			text {
				display: block;
				margin-top: 10rpx;
				color: #eee;
			}

			button {
				width: 50%;
				background-color: skyblue;
			}
		}

		.rainbow-container-bottom {
			position: absolute;
			bottom: 0;
			left: 50rpx;
			width: 600rpx;
			height: 200rpx;
			background-image: url('');
			-moz-background-size: 100% 100%;
			background-size: 100% 100%;
			line-height: 200rpx;
			text-align: center;
			font-size: 40rpx;
			color: #353535;
		}

		.rainbow-container-top {
			position: absolute;
			top: 240rpx;
			left: 50rpx;
			width: 600rpx;
			height: 200rpx;
			background-image: url('');
			-moz-background-size: 100% 100%;
			background-size: 100% 100%;
			line-height: 200rpx;
			text-align: center;
			font-size: 40rpx;
			color: #353535;
		}
	}
</style>
